<!DOCTYPE html>
<html>
<head>
    <title>JXS Admin 角色管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <#scripts />
    <!-- Fonts -->
    <style type="text/css">
    </style>
</head>

<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <#header headernames="角色管理 " />
            <#menu code="role" pcode="system" />
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body" id="main">
	                <div class="row">
                		<div class="col-xs-12">
	                		<div class="card">
		                		<div class="card-body">
		                			<div class="row">
		                				<div class="col-sm-12 toolbar">
			                				<button type="button" class="btn btn-info" @click="handleAdd">添加新角色</button>
		                				</div>
				                		<div class="col-sm-12">
				                			<template>
											  <el-table :data="tableData">
											    <el-table-column label="角色名称" prop="name"></el-table-column>
											    <el-table-column label="排序" prop="sort"></el-table-column>
											    <el-table-column label="备注" prop="tips"></el-table-column>
											    <el-table-column label="操作">
											      <template slot-scope="scope">
											        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
											        <el-button size="mini" type="primary" @click="handleSet(scope.$index, scope.row)">配置权限</el-button>
											        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
											      </template>
											    </el-table-column>
											  </el-table>
											  <#pagination />
											</template>
					                	</div>
		                			</div>
		                		</div>
	                		</div>
	                	</div>
                	</div>
                </div>
            </div>
        </div>
        <#footer />
	</div>
            <!-- Javascript Libs -->
	<script>
		var vm = new Vue({
		    el: '#main',
		    data: {
	    		tableData: [],
	    		size:10,
	    		current:1,
	    		total:0,
	    		pagesizes:false,
	    		layout:false
		    },
		 
		    // 点击菜单使用的函数
		    methods: {
		        onload:function(){
		        	this.getTableData();
		        },
		    	handleNodeClick:function(data){
		    		vm.pcode = data.code;
		    		vm.getTableData();
		    	},
		    	handleSizeChange(val) {
		          vm.size = val;
		          this.getTableData();
		        },
		        handleCurrentChange(val) {
		          vm.current = val;
		          this.getTableData();
		        },
		        getParams:function(){
		        	var params = new URLSearchParams();
		        	params.append('size', vm.size);
		        	params.append('current', vm.current);
		        	return params;
		        },
		   		getTableData:function(){
		        	axios.post('/role', vm.getParams()).then(function (response) {
		            	var data = response.data.data;
		            	console.log(data)
		                vm.tableData = data.records;
		            	vm.total = data.total;
		              }).catch(function (error) {
		                console.log(error);
		              });
		   		},
		   		ismenuFormatter:function(row, column, cellValue, index){
		   			if(cellValue==0){
		   				return "否";
		   			}
		   			return "是";
		   		},
		   		handleAdd:function(){
		    		layer.open({
	    			  type: 2,
	    			  title: '添加菜单',
	    			  shadeClose: false,
	    			  shade: 0.8,
	    			  area: ['800px', '600px'],
	    			  content: '${ctxPath}/role/add' //iframe的url
	    			}); 
		    	},
		        handleEdit(index,row){
		        	layer.open({
	    			  type: 2,
	    			  title: '编辑角色',
	    			  shadeClose: false,
	    			  shade: 0.8,
	    			  area: ['800px', '600px'],
	    			  content: '${ctxPath}/role/edit/'+ row.id
	    			}); 
		        },
		        handleDelete(index,row){
		        	layer.confirm('是否确认删除?', {icon: 3, title:'删除'}, function(index){
		        		axios.post('/role/delete/'+row.id).then(function (response) {
	        		    	layer.close(index);
	        		    	vm.onload();
			            }).catch(function (error) {
			                layer.msg(error);
			            }); 
	        		});
		        },
		        handleSet(index,row){
		        	console.log("前往配置权限页面")
		        	layer.open({
		    			  type: 2,
		    			  title: '配置菜单权限',
		    			  shadeClose: false,
		    			  shade: 0.8,
		    			  area: ['800px', '600px'],
		    			  content: '${ctxPath}/role/set/'+row.id //iframe的url
		    			}); 
		        }
		    }
		});
		vm.onload();
	</script>
</body>

</html>
